<template>
  <div id="app">
    <div style="width: 100%; height: 100%; border: solid 1px black">
      <div style="height: 500px">
        <div
          style="
            width: 80%;
            height: 506px;
            border: solid 1px black;
            float: left;
          "
        >
          <el-progress
            type="circle"
            :percentage="100"
            status="success"
          ></el-progress>
          <!-- 手机端播放 -->
          <audio
            src="../../assets/music/music_1.mp3"
            ref="kk"
            controls="controls"
          ></audio>
        </div>
        <!-- 音乐列表 -->
        <div
          style="
            
            
            margin-left: 80%;
          "
        >
          <el-button
            @click="drawer = true"
            type="primary"
            style="margin-left: 70%"
          >
            歌曲列表
          </el-button>

          <el-drawer
            title="歌曲列表"
            :visible.sync="drawer"
            :with-header="true"
            
          >
            <el-table :data="tableData" style="width: 100%" >
              <el-table-column prop="name" label="作者" width="140" @click="ListClick">
              </el-table-column>
              <el-table-column prop="song" label="歌曲" @click="ListClick">
              </el-table-column>
              <el-table-column prop="date" label="日期" width="140" @click="ListClick">
              </el-table-column>
              
            </el-table>
          </el-drawer>
        </div>
      </div>
      <hr />
      <div style="height: 200px">
        <div style="height: 120px; margin-top: 30px">
          <el-progress :percentage="this.per"></el-progress>
        </div>
        <div style="text-align: center">
          <el-button-group>
            <el-button type="primary" icon="el-icon-caret-left"></el-button>
            <el-button
              type="primary"
              icon="el-icon-video-pause"
              v-if="flag == false"
              @click="tick"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-video-play"
              v-if="flag == true"
              @click="tick"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-caret-right"
              @click="next"
            ></el-button>
            <el-button type="primary" icon="el-icon-video-play">p</el-button>
            <!-- 音量加减 -->
            <el-button
              type="primary"
              icon="el-icon-headset"
              @click="volumeadd"
            >+</el-button>
            <el-button
              type="primary"
              icon="el-icon-headset"
              @click="volumesub"
            >-</el-button>
            <!-- 音量加减 -->
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      drawer: false,
      flag: true,
      per: 0,
      dd: "",
      music: [
        // src\assets\music\music_1.MP3
        { id: 1, name: "1", src: "../../assets/music/music_1.mp3" },
        { id: 2, name: "2", src: "../../assets/music/music_1.mp3" },
        { id: 3, name: "3", src: "../../assets/music/music_1.mp3" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "周杰伦",
          song: "七里香",
        },
        {
          date: "2016-05-04",
          name: "周杰伦",
          song: "晴天",
        },
        {
          date: "2016-05-01",
          name: "李玖哲",
          song: "夏天",
        },
        {
          date: "2016-05-03",
          name: "陈奕迅",
          song: "阴天快乐",
        },
      ],
    };
  },
  methods: {
    tick() {
      if (this.flag == true) {
        console.log(this.$refs.kk.play());
        console.log(this.music[1].src);
      } else {
        this.$refs.kk.pause();
      }
      this.flag = !this.flag;
    },
    next() {
      if (this.per < 100) this.per += 10;
    },
    play() {
      console.log(this.$refs.m.id);
      console.log(this.dd);
      // this.$refs.kk.play()
    },
    ListClick(){
      console.log(this.song)
      console.log(11111)
    },
    volumeadd(){
      console.log( this.$refs.kk.volume )
      this.$refs.kk.volume +=0.1
    },
    volumesub(){
       this.$refs.kk.volume -=0.1
    },
  },
};
</script>